<template>
	<view class="wrap">
		<NavBar :title="title"></NavBar>
		<view class="content">
			<view class="sel_wrap">
				<view class="sel_left">筛选分类</view>
				<view class="sel_right">
					<view class="sel_box" @click="showFirstOption">
						<view class="sel_text">{{ firstText || '一级科目' }}</view>
						<u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
					</view>
					<view class="sel_box" @click="showSecondOption">
						<view class="sel_text">{{ secondText || '二级科目' }}</view>
						<u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
					</view>
				</view>
			</view>
			<u-picker :show="firstShow" :columns="firstList" keyName="cCoursecName" @confirm="confirmFirstOption"
				@cancel="hideFirstOption"></u-picker>
			<u-picker :show="secondShow" :columns="secondList" keyName="cSubClassName" @confirm="confirmSecondOption"
				@cancel="hideSecondOption"></u-picker>
			<view class="setmeal_list">
				<view class="list_top">
					<view class="top_title">
						<img class="list_icon" src="@/static/img/list_icon.png" alt="">
						<text>套餐列表</text>
					</view>
					<view class="top_title dis_flex just_bt al_center" @click="allcheck">
						<view class="list_check">
							<div class="all_check" v-show="isAllCheck"></div>
						</view>
						全选
					</view>
				</view>
				<u-empty mode="list" v-if="!renderList.length"></u-empty>
				<view class="list_container">
					<u-list @scrolltolower="scrolltolower" height="1080rpx">
						<u-list-item v-for="item in renderList" :key="item.Id">
							<view class="list_box" @click="chooseItem(item)">
								<view v-if="!item.isChecked" class="radio_box"></view>
								<view v-if="item.isChecked" class="active_radio_box">
									<view class="active_radio_box_inside"></view>
								</view>
								<view class="list_detail">
									<view class="det_title">{{ item.cCourseName }}</view>
									<view class="det_bottom">
										<view class="red_price">
											<view>￥</view>
											<view class="big_price">{{ item.SalePrice }}</view>
										</view>
										<view class="det_old_price">原价：￥{{ item.iTotalPrice }}</view>
										<view class="det_new_price">单科最低售价：￥{{ item.iMinsaleprice }}</view>
									</view>
								</view>
							</view>
						</u-list-item>
					</u-list>
				</view>
			</view>

			<view class="buy_box" @click="toBuy">
				购买
			</view>
		</view>
		<PopWindow />
	</view>
</template>

<script>
import PopWindow from '@/components/PopWindow'
export default {
	data () {
		return {
			title: '金考典题库管理',
			firstList: [],
			firstShow: false,
			firstText: '',
			firstId: '',
			secondList: [],
			secondShow: false,
			secondText: '',
			secondId: '',
			pageIndex: 1,
			pageSize: 10,
			renderList: [],
			checkedData: [],
			scrollFlag: true,
			isAllCheck: false,
		}
	},
	created () {
		this.getFirstDataList()
		this.getDataList()
	},
	methods: {
		//获取一级
		async getFirstDataList () {
			const res = await this.$http.get('jinkaodian/categorys')
			this.firstList = [res.Data]
		},
		// 点击第一个下拉
		showFirstOption () {
			this.firstShow = true
		},
		hideFirstOption () {
			this.firstShow = false
		},
		confirmFirstOption (data) {
			this.firstShow = false
			if (data.value[0].cCoursecName !== this.firstText) {
				this.firstText = data.value[0].cCoursecName
				this.firstId = data.value[0].iClassId
				this.secondText = ''
				this.secondId = ''
				this.getSecondDataList()
			}
		},
		// 获取第二个下拉
		async getSecondDataList () {
			const res = await this.$http.get(`jinkaodian/subjects/${this.firstId}`)
			this.secondList = [res.Data]
		},
		// 点击第二个下拉
		showSecondOption () {
			if (!this.firstText) {
				return uni.showToast({ title: "请选择一级科目", icon: 'none' })
			}
			this.secondShow = true
		},
		hideSecondOption () {
			this.secondShow = false
		},
		confirmSecondOption (data) {
			this.secondShow = false
			if (data.value[0].cSubClassName !== this.secondText) {
				this.secondText = data.value[0].cSubClassName
				this.secondId = data.value[0].iSubClassId
				//重置
				this.pageIndex = 1
				this.pageSize = 10
				this.getDataList()
			}
		},
		chooseItem (item) {
			item.isChecked = !item.isChecked
			this.checkedData = this.renderList.filter(x => x.isChecked).map(x => x.Id)
		},
		// 获取列表数据
		async getDataList () {
			uni.showLoading({ title: "加载中" })
			let obj = {
				pageIndex: this.pageIndex,
				pageSize: this.pageSize
			}
			if (this.firstId) {
				obj.iClassId = this.firstId;
			}
			if (this.secondId) {
				obj.iSubjectId = this.secondId;
			}
			let res = await this.$http.get('jinkaodian/meals', obj)
			if (res.Data.length == 0) {
				this.scrollFlag = false
			}
			res.Data.forEach(item => {
				item.isChecked = false
			})
			this.isAllCheck = false;
			this.renderList = this.pageIndex == 1 ? res.Data : this.renderList.concat(res.Data)
			uni.hideLoading()
		},
		scrolltolower () {
			if (this.scrollFlag) {
				this.pageIndex = this.pageIndex + 1
				this.getDataList()
			}
		},
		toSearch (item) {
			this.search = item
			this.renderList = []
			this.checkedData = []
			this.pageIndex = 1
			this.scrollFlag = true
			this.getDataList()
			this.isAllCheck = false;

		},
		allcheck () {
			this.renderList = this.renderList.map(item => {
				return { ...item, isChecked: this.isAllCheck ? false : true }
			})
			this.checkedData = this.renderList.filter(x => x.isChecked).map(x => x.Id)
			this.isAllCheck = !this.isAllCheck;
		},
		// 购买
		async toBuy () {
			/// 创建订单
			if (this.checkedData.length == 0) {
				return uni.showToast({
					icon: "none",
					title: "请选择要购买的产品"
				})
			}
			const res = await this.$http.post('jinkaodian/order', this.checkedData)
			if (res.Code != 200) {
				return uni.showToast({ title: res.Msg, icon: "none" });
			}
			this.orderId = res.Data.Id
			this.isAllCheck = false;
			let total = 0
			this.renderList.forEach(item => {
				if (item.isChecked) {
					total = total + item.SalePrice
				}
			})
			this.wxBuy(total);
		},
		async wxBuy (total) {
			let that = this;
			console.log(total, 'total')
			// 预付款
			let obj = {
				openId: uni.getStorageSync('openid'),
				total_fee: total,
				orderId: this.orderId
			}
			const res = await this.$http.get('pay/prepay', obj)
			let resData = JSON.parse(res.Data.Data)
			wx.requestPayment({
				timeStamp: resData.timeStamp,
				nonceStr: resData.nonceStr,
				signType: resData.signType,
				paySign: resData.paySign,
				package: resData.package,
				success () {
					uni.showToast({ title: `购买成功` })
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; //上一个页面
					prevPage.$vm.setTabs(2)
					uni.navigateBack()
				}
			})
		},
	},
	components: {
		PopWindow
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	background-color: #79829A;
	// background-image: url('../../../static/img/bg2.png');
	background-size: 750rpx 450rpx;
	background-repeat: no-repeat;
}

.content {
	height: calc(100vh - 338rpx);
	background: #fff;
	border-radius: 34rpx 34rpx 0 0;
	margin-top: 52rpx;
}

.header {
	width: 100%;
	height: 220rpx;
	background: linear-gradient(298deg, #5E637E 0%, #79829A 100%);
	border-radius: 0rpx;
}

.top_title {
	display: flex;
	align-items: center;

	.list_icon {
		width: 34rpx;
		height: 34rpx;
		margin-right: 18rpx;
	}

	.list_check {
		width: 36rpx;
		height: 36rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #D2D2D2;
		margin-right: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.all_check {
			width: 24rpx;
			height: 24rpx;
			background: #0051FF;
			border-radius: 8rpx;
			border: 2rpx solid #0051FF;
		}
	}
}

.sel_wrap {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 38rpx 28rpx 28rpx;

	box-sizing: border-box;

	.sel_left {
		width: 60rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
		line-height: 28rpx;
		padding-right: 12rpx;
	}

	.sel_right {
		display: flex;
		flex: 1;

		.sel_box {
			flex: 1;
			padding: 18rpx 20rpx 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #F5F5F5;
			border-radius: 12rpx;
			box-sizing: border-box;

			.sel_text {
				font-size: 26rpx;
			}

			&:first-child {
				color: #000000;
				margin-right: 12rpx;
			}

			// &:last-child {
			// 	color: #999999;
			// }
		}
	}
}

.setmeal_list {
	width: 100%;
	//height: 330rpx;
	background: linear-gradient(180deg, #DFEDFD 0%, #FFFFFF 100%);
	background-size: 100% 330rpx;
	background-repeat: no-repeat;
	border-radius: 32rpx;
	padding: 26rpx 28rpx 80rpx;
	box-sizing: border-box;

	.list_top {
		display: flex;
		justify-content: space-between;
	}

	.list_container {
		.list_box {
			display: flex;
			padding-top: 72rpx;

			&:first-child {
				padding-top: 50rpx;
			}

			.radio_box {
				width: 36rpx;
				height: 36rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #D2D2D2;
			}

			.active_radio_box {
				width: 36rpx;
				height: 36rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #0051FF;
				display: flex;
				justify-content: center;
				align-items: center;

				.active_radio_box_inside {
					width: 24rpx;
					height: 24rpx;
					background: #0051FF;
					border-radius: 8rpx;
					border: 2rpx solid #0051FF;
				}
			}

			.list_detail {
				padding-left: 18rpx;

				.det_title {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}

				.det_bottom {
					display: flex;
					align-items: flex-end;
					flex-wrap: wrap;

					.red_price {
						display: flex;
						align-items: flex-end;
						font-family: DIN;
						font-weight: bold;
						font-size: 28rpx;
						color: #FF0000;
						padding-right: 74rpx;
						padding-top: 12rpx;

						.big_price {
							font-size: 48rpx;
							line-height: 1;
						}
					}

					.det_old_price {
						padding-right: 48rpx;
						font-size: 28rpx;
						color: #999999;
						padding-top: 12rpx;
					}

					.det_new_price {
						padding-top: 12rpx;
						font-size: 28rpx;
						color: #999999;
					}
				}
			}
		}
	}
}

.buy_box {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 102rpx;
	line-height: 102rpx;
	background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
	border-radius: 0rpx;
	text-align: center;


	font-family: PingFang SC;
	font-weight: bold;
	font-size: 36rpx;
	color: #FFFFFF;
}
</style>